<template>
  <el-dialog title="外部员工调入" width="80%" :visible.sync="dialogVisible" :before-close="clear">
    <vxe-form :data="form" title-align="right">
      <vxe-form-item title="姓名" field="employeeName" :item-render="{}">
        <template #default="{ data }">
          <vxe-input v-model="data.employeeName" class="normal" placeholder="姓名" clearable></vxe-input>
        </template>
      </vxe-form-item>
      <vxe-form-item title="身份证号" field="idCard" :item-render="{}">
        <template #default="{ data }">
          <vxe-input v-model="data.idCard" class="normal" placeholder="身份证号" clearable></vxe-input>
        </template>
      </vxe-form-item>
      <vxe-form-item title="" field="" :item-render="{}">
        <template>
          <vxe-button status="primary" icon="vxe-icon-search" size="small" title="搜索" @click="search"></vxe-button>
          <vxe-button status="info" icon="vxe-icon-indicator" size="small" title="重置" @click="reset"></vxe-button>
        </template>
      </vxe-form-item>
    </vxe-form>
    <vxe-grid
      class="table-normal"
      ref="table"
      resizable
      show-overflow
      row-key
      keep-source
      size="small"
      border="inner"
      :data="tableData"
      :columns="columns"
      :checkbox-config="{ trigger: 'row' }"
    >
      <template #employeeName="{ row }">
        <span>{{ row.employeeName }}</span>
      </template>
      <template #idCard="{ row }">
        <span>{{ row.idCard }}</span>
      </template>
    </vxe-grid>
    <vxe-pager
      background
      :current-page.sync="form.page"
      :page-size.sync="form.pageSize"
      :total="total"
      :layouts="['Total', 'Sizes', 'PrevPage', 'JumpNumber', 'NextPage']"
      @page-change="change"
    >
    </vxe-pager>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import VXETable from 'vxe-table';
export default {
  props: {
    columns: {
      type: Array,
      default: () => [],
    },
    tableData: {
      type: Array,
      default: () => [],
    },
    total: {
      type: [String, Number],
      default: 10,
    },
  },
  data() {
    return {
      dialogVisible: false,
      form: {
        employeeName: '',
        idCard: '',
        page: 1,
        size: 10,
      },
    };
  },
  methods: {
    search() {
      this.form.page = 1;
      this.$emit('search', this.form);
    },
    reset() {
      this.resetPage();
      this.$emit('search', this.form);
    },
    clear() {
      this.$refs.table.clearCheckboxRow();
      this.dialogVisible = false;
      this.resetPage();
      this.$emit('closePersonnel');
    },
    submit() {
      const result = this.$refs.table.getCheckboxRecords();
      if (result.length === 0) {
        VXETable.modal.message({
          content: '未选择调入员工',
          status: 'error',
        });
        return;
      }
      this.$emit('submit', result);
    },
    change({ type, currentPage, pageSize }) {
      this.form.page = currentPage;
      this.form.size = pageSize;
      this.$emit('pager', this.form);
      console.log(type, currentPage, pageSize);
    },
    // 重置参数
    resetPage() {
      this.form = {
        employeeName: '',
        idCard: '',
        page: 1,
        size: 10,
      };
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep {
  .table-normal .vxe-body--row .vxe-body--column {
    height: 40px !important;
  }
}
</style>
